import React, { useState, useEffect, useCallback } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import {
    getSofContractSelected,
    getAccOverallSelectPayList,
    getSysDepartmentFindList,
    getSysUserSelected
} from '../../../../Api/listUrl';
import {
    putAccFeedbackInfoInsertFeedbackInfo,
    getAccFeedbackInfoUpdateShow,
    postAccFeedbackInfoUpdateFeedbackInfo
} from '../../financialApi';
import {
    AddFinanceFeedBackAll,
    AddFinanceFeedBackContent,
    AddFinanceFeedBackTop,
    AddFinanceFeedBackFrom,
} from './style';
import { Form, Select, message, InputNumber, Radio, Input, Button, Breadcrumb, Row, Col } from 'antd';
const { Option } = Select;
const { TextArea } = Input;


/**
 * @description: 费用反馈-- 费用反馈列表 -- 添加反馈
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-17） 创建
 */

const AddFinanceFeedBack = () => {
    const history = useHistory();
    const location = useLocation();
    const { state } = location;
    const [form] = Form.useForm();
    const { setFieldsValue } = form;
    const [contractList, setContractList] = useState([]); //合同列表
    const [moneyPayList, setMoneyPayList] = useState([]); //费用申请流水号下拉
    const [departmentList, setDepartmentList] = useState([]); //承担部门
    const [userList, setUserList] = useState([]); //用户列表
    const [buttonLoading, setButtonLoading] = useState(false);
    const userFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysUserSelected();
                if (code === '20000') {
                    setUserList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const departmentFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSysDepartmentFindList();
                if (code === '20000') {
                    setDepartmentList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const contractFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractSelected();
                if (code === '20000') {
                    setContractList(data);
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    const moneyPayFun = useCallback(
        () => {
            const parames = {
                isPay: 1,
                fillId: sessionStorage.getItem('userId')
            };
            ; (async () => {
                const { code, msg, data } = await getAccOverallSelectPayList(parames);
                if (code === '20000') {
                    setMoneyPayList(data)
                } else {
                    message.error(msg);
                }
            })()
        },
        [],
    )
    useEffect(() => {
        contractFun();
        moneyPayFun();
        departmentFun();
        userFun();
        if (state && 'clickId' in state) {
            ; (async () => {
                const { code, msg, data } = await getAccFeedbackInfoUpdateShow({ id: state.clickId });
                if (code === '20000') {
                    setFieldsValue(data)
                } else {
                    message.error(msg);
                }
            })()
        }
    }, [contractFun, moneyPayFun, departmentFun, userFun, state, setFieldsValue])
    const onFinish = (values) => {
        setButtonLoading(true);
        if (state && 'clickId' in state) {
            values.id = state.clickId;
            ; (async () => {
                const { code, msg } = await postAccFeedbackInfoUpdateFeedbackInfo(values);
                if (code === '20000') {
                    message.success('编辑反馈成功！');
                    history.go('-1');
                } else {
                    message.error(msg);
                }
            })();
        } else {
            ; (async () => {
                const { code, msg } = await putAccFeedbackInfoInsertFeedbackInfo(values);
                if (code === '20000') {
                    message.success('添加反馈成功！');
                    history.go('-1');
                } else {
                    message.error(msg);
                    setButtonLoading(false);
                }
            })();
        }
    };
    return <AddFinanceFeedBackAll>
        <Breadcrumb style={{ fontSize: '12px', fontFamily: 'PingFang SC', fontWeight: '500', color: '#999999', marginBottom: '20px' }}>
            <Breadcrumb.Item>费用反馈</Breadcrumb.Item>
            <Breadcrumb.Item style={{ cursor: 'pointer' }} onClick={() => history.go('-1')}>
                反馈列表
            </Breadcrumb.Item>
            <Breadcrumb.Item>
                添加反馈
            </Breadcrumb.Item>
        </Breadcrumb>
        <AddFinanceFeedBackContent>
            <AddFinanceFeedBackTop>
                <h3>添加反馈</h3>
            </AddFinanceFeedBackTop>
            <AddFinanceFeedBackFrom>
                <Form
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="关联合同"
                        name="conNo"
                        labelCol={{ span: 24, offset: 0 }}
                        // rules={[
                        //     {
                        //         required: true,
                        //         message: '请选择关联合同!',
                        //     },
                        // ]}
                    >
                        <Select placeholder='请选择'>
                            {
                                contractList.map(item => <Option value={item.name} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="费用申请流水号"
                        name="serialNos"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择费用申请流水号!',
                            },
                        ]}
                    >
                        <Select mode="multiple" >
                            {
                                moneyPayList.map(item => <Option value={item.serialNo} key={item.id} disabled={item.isChoose}>
                                    <span style={{}}>{item.serialNo}</span> {
                                        !item.isChoose ? <span style = {{
                                            float: 'right',
                                            fontSize: '14px',
                                            fontFamily: 'PingFang SC',
                                            fontWeight: '400',
                                            color: '#1890FF'
                                        }}>
                                            {item.nature}-{item.money}元
                                        </span> 
                                        : 
                                        <span style={{
                                            float: 'right',
                                            fontSize: '14px',
                                            fontFamily: 'PingFang SC',
                                            fontWeight: '400',
                                            color: '#1890FF',
                                            opacity: '0.5'
                                        }}>
                                            {item.nature}-{item.money}元
                                        </span>
                                    }
                                </Option>)
                            }
                        </Select>
                    </Form.Item>
                    {/* <Form.Item
                        label="费用性质"
                        name="nature"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入费用性质!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item> */}
                    <Form.Item
                        label="实报金额"
                        name="money"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请输入实报金额!',
                            },
                        ]}
                    >
                        <InputNumber
                            formatter={value => `￥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                        // parser={value => value.replace(/\$\s?|(,*)/g, '')}
                        />
                    </Form.Item>
                    <Form.Item
                        label="承担部门"
                        name="assumeDep"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担部门!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                departmentList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="承担人员"
                        name="assumeMain"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择承担人员!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="办事结果"
                        name="result"
                        rules={[
                            {
                                required: true,
                                message: '请选择办事结果!',
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value={0}>未完成</Radio>
                            <Radio value={1}>已完成</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="费用情况"
                        name="situation"
                        rules={[
                            {
                                required: true,
                                message: '请选择费用情况!',
                            },
                        ]}
                    >
                        <Radio.Group>
                            <Radio value={0}>正常</Radio>
                            <Radio value={1}>非正常</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="财务审核人"
                        name="financial"
                        labelCol={{ span: 24, offset: 0 }}
                        rules={[
                            {
                                required: true,
                                message: '请选择财务审核人!',
                            },
                        ]}
                    >
                        <Select>
                            {
                                userList.map(item => <Option value={item.id} key={item.id}>{item.name}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="简要说明"
                        name="remake"
                        labelCol={{ span: 24, offset: 0 }}
                    >
                        <TextArea showCount maxLength={100} />
                    </Form.Item>
                    <Form.Item>
                        <Row>
                            <Col span={24} style={{ textAlign: 'right' }}><Button >
                                取消
                            </Button>
                                <Button type="primary" htmlType="submit" loading={buttonLoading}>
                                    确定
                                </Button></Col>
                        </Row>


                    </Form.Item>
                </Form>
            </AddFinanceFeedBackFrom>
        </AddFinanceFeedBackContent>
    </AddFinanceFeedBackAll>
}

export default AddFinanceFeedBack;